<template>
  <div class="shoplist">
    <!-- 使用编程式路由传值  <router-link ></router-link>在此处会与ui等地方发生冲突让布局变形-->
    <div class="shopbox" v-for="(item) in shoplist" :key="item.id" @click="getinfo(item.id)">
      <img :src="item.img_url" alt>
      <h4>{{item.title}}</h4>
      <div class="shopdata">
        <p class="p1">
          <span>￥{{item.sell_price}}</span>
          <s>￥{{item.market_price}}</s>
        </p>
        <p class="p2">
          <span>热卖中</span>
          <span>{{item.stock_quantity}}</span>
        </p>
      </div>
    </div>
    <button
      type="button"
      class="mui-btn mui-btn-primary mui-btn-block mui-btn-danger"
      @click="add()"
    >加载更多</button>
  </div>
</template>
<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      pageindex: 1,
      shoplist: []
    };
  },
  created() {
    this.getshoplist();
  },
  methods: {
    getshoplist() {
      this.$http
        .get(
          //获取商品列表
          "http://www.liulongbin.top:3005/api/getgoods?pageindex=" +
            this.pageindex
        )
        .then(result => {
          var result = result.body;
          // console.log(result);
          if (result.status == 0) {
            this.shoplist = this.shoplist.concat(result.message);
          } else {
            Toast("加载失败");
          }
        });
    },
    add() {
      //加载更多
      this.pageindex++;
      this.getshoplist();
    },
    getinfo(id) {
      // 编程式路由导航  传参
      // console.log(this);
      //name名字    //params传参
      this.$router.push({ name: "shopinfo", params: { id } });
    }
  }
};
</script>
<style scoped>
.shoplist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.shoplist .shopbox {
  width: 49%;
  border: 1px #cccccc solid;
  border-radius: 3px;
  box-shadow: 0 0 5px #cccccc;
  margin-top: 3px;
  /* h4自适应 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.shoplist .shopbox img {
  width: 100%;
}
.shoplist .shopbox h4 {
  font-size: 15px;
  color: #000000;
}
.shoplist .shopbox .shopdata {
  /* margin-bottom: 0; */
  background: #eeeeee;
  margin: 2px;
  padding: 0;
}
.shoplist .shopbox .shopdata p {
  margin: 0;
  padding: 5px;
}
.shoplist .shopbox .shopdata .p1 span {
  color: red;
  font-size: 15px;
  font-weight: 600;
}
.shoplist .shopbox .shopdata .p1 s {
  margin-left: 20px;
}
.shoplist .shopbox .shopdata .p2 {
  display: flex;
  justify-content: space-between;
}
.mui-btn-block {
  padding: 5px;
}
</style>
